<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-20 15:03:18
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:37:17
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\staticsManage\statement\index.vue
 * @Description: 账号收款汇总
-->
<template>
  <custom-container :config="config" />
</template>

<script setup lang="ts">
import { ref, computed, getCurrentInstance, reactive } from 'vue'
import { ElButton } from 'element-plus'
import { getSummaries } from '@/utils'

const {
  appContext: {
    config: {
      globalProperties: { $download },
    },
  },
} = getCurrentInstance()
const exportLoading = ref<boolean>(false)
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  customerName: undefined,
  serialNo: undefined,
  ywymc: undefined,
  endDate: undefined,
  sszd: undefined,
  zdzt: undefined,
  qd: undefined,
})
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '收款账号',
            prop: 'customerName',
          },
          {
            label: '运输类型',
            prop: 'customerName',
          },
          {
            type: 'date-picker',
            label: '收款日期',
            prop: 'endDate',
            option: {
              type: 'date',
            },
          },
          {
            label: '收款人',
            prop: 'customerName',
          },
        ],
        queryParams,
        formOption: {},
      },
      btns: [
        {
          title: '导出收款',
          type: 'primary',
          loading: exportLoading.value,
          onClick: (e) => {
            exportLoading.value = true
            const data = queryParams
            $download(
              'finance/seaAirTransportFinanceAccount/listExport', 
              data, 
              `空海运账单_${ new Date().getTime() }.xlsx`,
            )
            .finally(() => {
              exportLoading.value = false
            })
          },
        },
      ],
      table: {
        columns: [
          { label: '日期', align: 'center', prop: 'endDate' },
          { label: '收款账号', align: 'center', prop: 'endDate' },
          { label: '收款人', align: 'center', prop: 'customerCode' },
          { label: '收款金额', align: 'center', prop: 'customerCode' },
          { label: '操作',
            align: 'center', 
            render(h, params) {
              return h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                },
                {
                  default: () => '详情',
                },
              )
            },
          },
        ],
        event: {
          showSummary: true,
          summaryMethod: getSummaries(['receivingTotalWeight']),
        },
      },
      api: () => Promise.resolve({ code: 200, data: [{}] }),
    }
  },
  set(val) {
    return val
  },
})

</script>